<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/dianxin .css" />
    <link rel="stylesheet" href="./font_4003687_mi6g8a6ikt/iconfont.css" />
    <link rel="stylesheet" href="css/swiper.css" />
  </head>
  <body>
    <header>
      <a href="./智慧商城首页.html">
        <span><</span>
      </a>
      <p>商品详情页</p>
    </header>
    <div class="box">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/10072.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10073.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10074.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10075.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10076.jpg" width="100%" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="nav">
        <div class="lpl">
          <div class="lol">
            <span class="lp">￥</span>
            <span class="lp">98.00</span>
            <del><span class="lo">￥128.00</span></del>
          </div>
          <div class="sun">
            <span>已售17226件</span>
          </div>
        </div>
        <div class="son">
          <span
            >FISH
            BASKET春季裤子男生春秋款九分潮牌宽松束脚春夏季哈伦工装运动休闲长裤</span
          >
        </div>
      </div>
      <div class="text">
        <div class="sum">
          <p><i class="iconfont icon-duigou"></i>七天无理由退货</p>
          <p><i class="iconfont icon-duigou"></i>48小时发货</p>
        </div>
        <div class="som"><span>></span></div>
      </div>
      <div class="web">
        <span>商品描述</span>
      </div>
      <img src="./imgs/10077.jpg" alt="" />
      <img src="./imgs/10078.jpg" alt="" />
      <img src="./imgs/10079.jpg" alt="" />
      <img src="./imgs/10080.jpg" alt="" />
      <img src="./imgs/10081.jpg" alt="" />
      <img src="./imgs/10082.jpg" alt="" />
      <img src="./imgs/10083.jpg" alt="" />
      <img src="./imgs/10084.jpg" alt="" />
      <img src="./imgs/10085.jpg" alt="" />
      <img src="./imgs/10086.jpg" alt="" />
      <img src="./imgs/10087.jpg" alt="" />
      <img src="./imgs/10088.jpg" alt="" />
      <img src="./imgs/10089.jpg" alt="" />
      <img src="./imgs/10090.jpg" alt="" />
      <img src="./imgs/10091.jpg" alt="" />
      <img src="./imgs/10092.jpg" alt="" />
      <img src="./imgs/10093.jpg" alt="" />
      <img src="./imgs/10094.jpg" alt="" />
      <img src="./imgs/10095.jpg" alt="" />
      <img src="./imgs/10096.jpg" alt="" />
    </div>
    <footer>
      <div class="mask">
        <a href="./智慧商城首页.html">
          <i class="iconfont icon-shouye"></i>
          <p>首页</p>
        </a>
        <a href="./购物车.html">
          <i class="iconfont icon-gouwuchekong"></i>
          <p>购物车</p>
        </a>
      </div>
      <div class="main">
        <a href="#">
          <div class="min">加入购物车</div>
        </a>
        <a href="#">
          <div class="max">立即购买</div>
        </a>
      </div>
    </footer>
  </body>
  <script src="js/swiper.js"></script>
</html>
<script>
  var mySwiper = new Swiper('.swiper', {
    speed: 300,
    loop: true,
    autoplay: {
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination'
    },
    centeredSlides: true,
    observer: true,
    observeParents: true
  })
</script>
